<template>
    <div class="identityAuthentication">
        <div class="top">
            <img src="../../assets/身份证认证.png" alt="">
            <span>身份认证</span>
        </div>
        <div class="details">
          <!-- 审核中 -->
          <div v-if="approveStatus.educationalBackgroundStatus==0" class="status" clear-fix>
            <span style="color: #ff9100;">审核中</span>
            <span style="color: #ff9100;">(内容正在审核中，不要进行修改操作)</span>
          </div>  
          <!-- 审核成功 -->
           <div v-else-if="approveStatus.educationalBackgroundStatus==1" class="status" clear-fix>
            <span style="color:#999999;">审核成功</span>
            <!-- <span style="color: #ff9100;">(内容正在审核中，不要进行修改操作)</span> -->
          </div>  
          <!-- 审核失败 -->
          <div v-else-if="approveStatus.educationalBackgroundStatus==2" class="status" clear-fix>
            <span style="color: #f93a3a;">审核失败</span>
            <!-- <span style="color: #ff9100;">(内容正在审核中，不要进行修改操作)</span> -->
          </div>
          <!-- 去认证 -->
           <div v-else class="status" clear-fix>
            <span style="color: #f93a3a;">审核失败</span>
            <!-- <span style="color: #ff9100;">(内容正在审核中，不要进行修改操作)</span> -->
          </div>
            <span>上传时间：2017-10-10 10:12:12</span>
        </div>
        <div class="name">
            <span>真实姓名:</span>
            <input type="text" v-model="userIdCard.idCardNickname">
        </div>
        <div class="identity">
            <span>身份证号:</span>
            <input type="text" v-model="userIdCard.idCardNumber">
        </div>
        <div class="uploadModule">
            <p>上传照片:</p>

            <!--手持身份证照  -->
            <div class="front">
               <div class="inHand">
                   <p>上传手持身份证照</p>
                   <div class="file-bgi">
                   <img class="coverImg" v-bind:src="fileImg"  alt="">
                   <input type="file" title=" " class="img-upload" @change="uploadToQiniu" accept="image/gif,image/jpeg,image/jpg,image/png" ref="file">
                </div>  
               </div>
               <div class="example">
                   <p>手持证件照示例</p>
                   <img src="../../assets/手持身份证.png" alt="">
               </div>
            </div>
            <div class="state1">说明:手持证件，保持证件信息清晰可见，照片内容真实有效，不得做任何修改。</div>    
            <!-- 身份证反面 -->
            <div class="contrary clear-fix">
               <div class="inHand">
                   <p>身份证反面</p>
                   <div class="file-bgi">
                   <img class="coverImg" v-bind:src="fileImgs"  alt="">
                   <input type="file" title=" " class="img-upload" @change="uploadToQinius" accept="image/gif,image/jpeg,image/jpg,image/png" ref="files">
                </div>  
              
            </div>  
              <div class="example">
                   <p>证件照示例</p>
                   <img src="../../assets/背面.png" alt="">
            </div>
            </div> 
            <div class="state2">说明:手持证件，保持证件信息清晰可见，照片内容真实有效，不得做任何修改。</div>
        </div>
        <el-button type="primary" round @click="submit">提交</el-button>
    </div>
</template>

<script>
export default {
  data() {
    return {
        userIdCard: {
          idCardNickname: "",
          idCardNumber: ""
      },
      approveStatus:{},
      fileImg: "",
      fileImgs: "",
      imgFile: "",
    };
  },
  // props: ["covername", "init"],
  created() {
    this.utils.$get(this.utils.GET_APPROVE_INFORMATION, data => {
      console.log(data);
      this.userIdCard.idCardNickname=data.data.userIdCard.idCardNickname
      this.fileImg=data.data.userIdCard.idCardBackImage
    });
    this.utils.$get(this.utils.GET_USER_APPROVE,data=>{
      // console.log(data)
      this.approveStatus = data.data
    })
  },
  methods: {
    uploadToQiniu() {
      // var fileImgUrl = '/lifetime/video/get_token'
      // this.$http.get(fileImgUrl).then((data) =>{
      // 	var token = data.body.data;
      let file = this.$refs.file.files[0];
      this.imgFile = this.$refs.file.files[0];
      var fd = new FormData();
      fd.append("file", file);
      var Url = this.utils.UP_IMAGE;
      if (file) {
        this.utils.$post(
          Url,
          data => {
            if (data) {
              this.fileImg = data.data;
            }
          },
          fd
        );
      }
    },
     uploadToQinius() {
      // var fileImgUrl = '/lifetime/video/get_token'
      // this.$http.get(fileImgUrl).then((data) =>{
      // 	var token = data.body.data;
      let file = this.$refs.files.files[0];
      this.imgFile = this.$refs.files.files[0];
      var fd = new FormData();
      fd.append("file", file);
      var Url = this.utils.UP_IMAGE;
      if (file) {
        this.utils.$post(
          Url,
          data => {
            if (data) {
              this.fileImgs = data.data;
              this.notify();
            }
          },
          fd
        );
      }
    },
    // 发送图片
    notify() {
      this.$emit("setImageUrl", this.fileImg, this.imgFile);
    },
    // 提交
    submit(){
      
    }
  },
  watch: {
    init(newVal) {
      this.fileImg = newVal;
    }
  }

};
</script>







<style lang="less">
.identityAuthentication {
  padding: 40px;
  .top {
    > img {
      vertical-align: middle;
      padding-right: 8px;
    }
    > span {
      font-size: 18px;
      color: #232323;
      font-weight: bold;
    }
  }
  .details {
    margin-top: 15px;
    background-color: #f8f8f8;
    height: 60px;
    line-height: 60px;
    .status{
      float: left;
      margin-right: 650px;
    > span:nth-child(1) {
      font-size: 20px;
    }
    > span:nth-child(2) {
      font-size: 16px;
    }
    }
    > span:nth-child(3) {
      display:block;
      float: left;
      font-size: 14px;
      color: #666666;
    }
  }
  .name {
    margin-top: 40px;
    > span {
      font-size: 14px;
      color: #999999;
      padding-right: 10px;
    }
    > input {
      height: 36px;
      width: 360px;
      border: 1px solid #cccccc;
      padding-left: 10px;
    }
  }
  .identity {
    margin-top: 40px;
    > span {
      font-size: 14px;
      color: #999999;
      padding-right: 10px;
    }
    > input {
      height: 36px;
      width: 430px;
      border: 1px solid #cccccc;
      padding-left: 10px;
    }
  }
  .uploadModule {
    margin-top: 40px;
    > p {
      font-size: 14px;
      color: #999999;
    }
    .front {
      display: flex;
      .inHand {
        > p {
          font-size: 18px;
          color: #333333;
          font-weight: 600;
          text-align: center;
          margin-bottom: 12px;
          margin-left: 92px;
        }
        .file-bgi {
          margin-left: 86px;
          width: 300px;
          height: 200px;
          background: url("../../assets/上传手持身份证照.png") no-repeat center;
          .coverImg {
            // position: absolute;
            border: none;
            top: 0px;
            width: 100%;
            height: 100%;
          }
          .img-upload {
            width: 100%;
            height: 100%;
            opacity: 0;
          }
        }
      }
      .example {
        > p {
          font-size: 14px;
          color: #999999;
          text-align: center;
          margin-bottom: 12px;
          margin-left: -109px;
        }
        > img {
          display: inline-block;
          margin-left: 85px;
          width: 300px;
          height: 200px;
        }
      }
    }
  }
  .state1 {
    font-size: 14px;
    color: #999999;
    margin-left: 86px;
    margin-top: 20px;
    display: inline-block;
  }
  .contrary {
    margin-top: 40px;

    .inHand {
      float: left;
      > p {
        font-size: 18px;
        color: #333333;
        font-weight: 600;
        text-align: center;
        margin-bottom: 12px;
        margin-left: 92px;
      }
      .file-bgi {
        
        margin-left: 86px;
        width: 300px;
        height: 200px;
        background: url("../../assets/身份证反面.png") no-repeat center;
        .coverImg {
          // position: absolute;
          border: none;
          top: 0px;
          width: 100%;
          height: 100%;
        }
        .img-upload {
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }
    .example {
      float: left;
      // display: inline-block;
      > p {
        font-size: 14px;
        color: #999999;
        text-align: center;
        margin-bottom: 12px;
        margin-left: -124px;
      }
      > img {
        display: inline-block;
        margin-left: 85px;
      }
    }
  }
  .state2 {
    font-size: 14px;
    color: #999999;
    margin-left: 86px;
    margin-top: 20px;
    display: inline-block;
  }
  //  提交按钮
  .el-button--primary {
    width: 240px;
    height: 40px;
    margin-top: 80px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 40px;
    margin-bottom: 60px;
    margin-left: 264px;
  }
}
</style>

